<template>
  <div id="app">
    <div class="cart" :style="'height:'+fullHeight+'px;'">
      <div class="has-cart" v-if="arr.length">
        <div class="top">
          <span>购物车</span>
          <span @click="changeState">{{!isEdit?'编辑':'完成'}}</span>
        </div>
        <ul class="list">
          <li class="item" v-for="(v,i) in arr" :key="i">
            <span
              class="choice iconfont icon-xuanze"
              :id="v.id"
              @click="checkSingle(i)"
              :class="{'check-true':v.select}"
            ></span>
            <img :src="v.g_src" />
            <div class="msg">
              <div class="name">{{v.product.proName}}</div>
              <div class="specs">
                <span></span>
              </div>
              <div class="info">
                <span class="price">￥{{v.product.price||0}}</span>
                <div>
                  <button @click="subNum(v.proId)">-</button>
                  <button>{{v.product.c_num}}</button>
                  <button @click="addNum(v.proId)">+</button>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <div class="bottom">
          <div class="bottom-left">
            <span
              class="choice iconfont icon-xuanze"
              @click="checkAll"
              :class="{'check-true':isCheckAll}"
            ></span>
            <span>全选</span>
            <div class="totalprice" v-if="!isEdit">
              <span>合计:￥{{totalPrice}}</span>
              <span>消耗积分:{{totalIntegral}}</span>
            </div>
          </div>
          <div v-if="!isEdit" class="btn">
            <button
              class="pay"
              @click="toSettle"
              v-bind:disable="disable"
              :class="{'btn-disable':this.disable}"
            >{{this.integralEnough?'去结算('+totalNum+'件)':'积分不足'}}</button>
          </div>
          <div v-else class="btn">
            <button class="collect" @click="collect">移入收藏夹</button>
            <button class="remove" @click="remove">删除</button>
          </div>
        </div>
      </div>
      <div class="no-cart" v-else>
        <div class="top">购物车</div>
        <div>
          <img :src="img" />
        </div>
        <span>购物车没有商品</span>
        <div>
          <button>再去逛逛</button>
        </div>
      </div>
    </div>
    <Nav/>
  </div>
</template>
<script>
import Nav from '../../components/Nav'
import { Toast } from "mint-ui";
export default {
  name: "Cart",
  components: {Nav},
  data() {
    return {
      arr: [],
      img: require("../../assets/images/hq/no-cart.png"),
      integral: 0, //账户积分
      totalPrice: 0,
      totalIntegral: 0,
      totalNum: 0,
      isEdit: false,
      isCheckAll: true,
      disable: false,
      fullHeight: document.documentElement.clientHeight,
      integralEnough: true,
      toastInstanse: null
    };
  },
  methods: {
    getHeight() {
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          this.fullHeight = window.fullHeight;
        })();
      };
    },
    changeState() {
      this.isEdit = !this.isEdit;
    },
    subNum(i) {
      this.arr.map(v => {
        if (i == v.proId) {
          if (v.product.c_num > 1) {
            v.product.c_num--;
          } else {
            v.product.c_num = 1;
          }
        }
      });
      this.countPrice();
    },
    addNum(i) {
      var list = [];
      this.arr.map(v => {
        if (i == v.proId) {
          v.product.c_num++;
        }
      });
      this.countPrice();
    },
    showToastNo() {
      this.toastInstanse = Toast({
        message: "请选择需要收藏的商品",
        position: "middle",
        duration: 2000
      });
    },
    showToastYes() {
      this.toastInstanse = Toast({
        message: "收藏成功",
        position: "middle",
        duration: 2000
      });
    },
    collect() {
      var flag = 0;
      var proIds = [];
      this.arr.map((v, i) => {
        if (v.select) {
          flag = 1;
          proIds.push(v.proId);
        }
      });
      if (flag == 0) {
        this.showToastNo();
        setTimeout(() => {
          this.toastInstanse.close();
        }, 2000);
      } else {
        var data = JSON.stringify({
          userId: "test1",
          proIds: proIds
        });
        this.axios
          .post("http://115.28.137.176:8082/collect/cartCollect", data)
          .then(res => {
            console.log(res);
            this.showToastYes();
            setTimeout(() => {
              this.toastInstanse.close();
            }, 2000);
          })
          .catch(err => {
            console.log("网络错误", err);
          });
      }
      // this.remove();
    },
    remove() {
      this.arr.map((v, i) => {
        if (v.select) {
          this.axios
            .get("http://115.28.137.176:8080/deleteCart", {
              params:{
                cartId:v.cartId
              }
            })
            .then(res => {
              this.getData();
              this.checkAll();
            })
            .catch(err => {
              console.log("网络错误", err);
            });
        }
      });
    },
    checkSingle(i) {
      this.arr[i].select = !this.arr[i].select;
      this.countPrice();
      var flag = 1;
      this.arr.map(v => {
        if (!v.select) {
          flag = 0;
        }
      });
      if (flag == 0) {
        this.isCheckAll = false;
      } else {
        this.isCheckAll = true;
      }
      this.checkBtn();
    },
    checkAll() {
      this.isCheckAll = !this.isCheckAll;
      if (this.isCheckAll) {
        this.arr.map(v => {
          v.select = true;
        });
      } else {
        this.arr.map(v => {
          v.select = false;
        });
      }
      this.countPrice();
      this.checkBtn();
    },
    countPrice() {
      this.totalPrice = 0;
      this.totalIntegral = 0;
      this.totalNum = 0;
      this.arr.map(v => {
        if (v.select) {
          this.totalPrice += parseFloat(
            (
              v.product.proAprice * v.product.c_num +
              v.product.proBprice * v.product.c_num
            ).toFixed(2)
          );
          this.totalIntegral += v.product.proScore * v.product.c_num;
          this.totalNum += v.product.c_num;
        }
      });
      if (this.totalIntegral > this.integral) {
        this.integralEnough = false;
        this.disable = true;
      } else {
        this.integralEnough = true;
        this.disable = false;
      }
    },
    //结算
    toSettle() {
      if (this.integralEnough) {
        var list = [];
        var goodsInfo = [];
        this.arr.map(v => {
          if (v.select) {
            goodsInfo.push(v);
          }
        });
        list.push({
          goodsInfo,
          price: this.totalPrice,
          integral:this.integral,
          totalIntegral: this.totalIntegral,
          num: this.totalNum
        });
        if (goodsInfo) {
          localStorage.setItem("cartList", JSON.stringify(list));
          // this.$router.push({
          //   path: "/cart/settle"
          // });
          location.href='./settle.html'
        }
      }
    },
    checkBtn() {
      var flag = 0;
      this.arr.map(v => {
        if (v.select) {
          flag = 1;
        }
      });
      if (flag == 1) {
        if (this.integralEnough) {
          this.disable = false;
        } else {
          this.disable = true;
        }
      }
      else{
        this.disable = true;
      }
    },
    getData() {
      this.axios
        .get("http://115.28.137.176:8080/selectCart", {
          params: {
            userId: "2"
          }
        })
        .then(res => {
          this.arr = res.data.data;
          this.arr.map(v => {
            // console.log(v);
            // v.g_src = require("../../assets/images/hq/" + v.g_src + ".jpg");
            this.$set(v, "select", true);
            this.$set(v.product, "c_num", 1);
            if (v.product.proAprice > 0) {
              this.$set(v.product, "price", v.product.proAprice);
            } else if (v.product.proBprice > 0) {
              this.$set(v.product, "price", v.product.proBprice);
            }
            this.countPrice();
          });
        })
        .catch(err => {
          console.log("网络错误", err);
        });
    },
    //获取积分
    getIntegral() {
      this.axios
        .get(
          "http://115.28.137.176:7070/Users_vo_gyqOperation/selectUserScore",
          {
            params: {
              "userId": "2"
            }
          }
        )
        .then(res => {
          console.log('积分',res.data.data)
          this.integral = res.data.data;
          if (this.totalIntegral > this.integral) {
            this.integralEnough = false;
            this.disable = true;
          } else {
            this.integralEnough = true;
            this.disable = false;
          }
        })
        .catch(err => {
          console.log("网络错误", err);
        });
    }
  },
  watch: {
    fullHeight(val) {
      if (this.timer) {
        this.fullHeight = val;
        this.timer = true;
        setTimeout(() => {
          this.timer = false;
        }, 400);
      }
    }
  },
  mounted: function() {
    this.getHeight();
    this.getData();
    this.getIntegral();
  }
};
</script>
<style src="../../assets/font/iconfont.css"></style>
<style scoped lang="less">
@baseSize: 20;
@gray1: #f5f5f5;
@gray2: #f2f2f2;
@gray3: #f8f8f8;
html {
  font-size: @baseSize*1px;
}
.px2rem(@name,@px) {
  @{name}: @px / 2 / @baseSize * 1rem;
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ellipsis() {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
button {
  outline: none;
  background: transparent;
  border: 0;
}

.cart {
  background: @gray2;
  .has-cart {
    .top {
      background: #fff;
      display: flex;
      .px2rem(height, 91);
      .px2rem(line-height, 91);
      span:first-child {
        .px2rem(font-size, 35);
        width: 56%;
        display: flex;
        justify-content: flex-end;
      }
      span:last-child {
        width: 41%;
        .px2rem(font-size, 28);
        display: flex;
        justify-content: flex-end;
      }
    }
    .list {
      display: flex;
      flex-direction: column;
      .px2rem(margin-top, 20);
      .item {
        display: flex;
        .px2rem(height, 175);
        padding: 15px 10px;
        background: #fff;
        border-bottom: 1px solid @gray3;
        .choice {
          display: flex;
          align-items: center;
          .px2rem(font-size, 31);
        }
        img {
          .px2rem(width, 168);
          .px2rem(height, 168);
          .px2rem(margin-left, 10);
        }
        .msg {
          width: 100%;
          .px2rem(margin-left, 21);
          .px2rem(font-size, 22);
          .px2rem(height, 90);
          .name {
            .px2rem(width, 423);
            .px2rem(font-size, 23);
            .px2rem(line-height, 34);
            display: flex;
            .ellipsis();
          }
          .specs {
            .px2rem(margin-top, 20);
            .px2rem(height, 26);
            align-items: center;
            display: flex;
            span {
              .px2rem(font-size, 20);
            }
          }
          .info {
            display: flex;
            .px2rem(height, 55);
            .price {
              width: 50%;
              .px2rem(font-size, 22);
              display: flex;
              align-items: flex-end;
            }
            div {
              display: flex;
              align-items: flex-end;
              width: 50%;
              justify-content: flex-end;
              button {
                .px2rem(font-size, 22);
                .px2rem(width, 60);
                .px2rem(height, 48);
                .px2rem(line-height, 48);
                border: 1px solid @gray2;
                text-align: center;
                background: transparent;
              }
            }
          }
        }
      }
    }
    .bottom {
      display: flex;
      position: fixed;
      .px2rem(bottom, 140);
      width: 100%;
      z-index: 1;
      background: #fff;
      .px2rem(height, 102);
      .px2rem(font-size, 27);
      .px2rem(line-height, 102);
      border-top: 1px solid @gray1;
      align-items: center;
      border-bottom: 1px solid @gray1;
      .bottom-left {
        display: flex;
        align-items: center;
        width: 100%;
        .px2rem(margin-left, 21);
        span:first-child {
          .px2rem(font-size, 31);
          .px2rem(margin-right, 22);
        }
        .totalprice {
          display: flex;
          flex-direction: column;
          width: 60%;
          .px2rem(margin-left, 36);
          span:first-child {
            .px2rem(font-size, 31);
            .px2rem(margin-top, 15);
            .px2rem(height, 53);
          }
          span:nth-child(2) {
            .px2rem(font-size, 23);
          }
        }
      }
      .btn {
        display: flex;
        width: 50%;
        justify-content: flex-end;
        .px2rem(height, 102);
        align-items: center;
        button {
          .px2rem(font-size, 30);
          text-align: center;
          color: #000;
          .px2rem(height, 102);
        }
        .pay {
          .px2rem(width, 236);
          background: #e94716;
        }
        .remove,
        .collect {
          .px2rem(width, 188);
          .px2rem(font-size, 31);
        }
        .collect {
          background: #f8c009;
        }
        .remove {
          background: #e94716;
        }
      }
    }
  }
  .no-cart {
    display: flex;
    width: 100%;
    flex-direction: column;
    text-align: center;
    .px2rem(font-size, 30);
    .top {
      background: #fff;
      .px2rem(height, 82);
      .px2rem(line-height, 82);
      .px2rem(font-size, 33);
      text-align: center;
    }
    span {
      .px2rem(height, 110);
      .px2rem(line-height, 110);
    }
    div {
      display: flex;
      justify-content: center;
      img {
        .px2rem(width, 314);
        .px2rem(height, 290);
        .px2rem(margin-top, 66);
      }
      button {
        .px2rem(width, 158);
        .px2rem(height, 80);
        .px2rem(border-radius, 15);
        border: 1px solid #e94716;
      }
    }
  }
}
.check-true {
  color: #ff7d01;
}
.btn-disable {
  background: @gray3!important;
}
</style>
